<template>
    <van-tabs v-model:active="active" shrink color="#1365b7" line-height="4px"  >
        <van-tab title="圈子">
            <van-empty description="描述文字" v-if="list.length === 0" />
            <van-cell-group v-for="item in list" :key="item" :title="item.title" >
                <van-row>
                    <van-col span="4">
                        <van-image
                            round
                            width="3.2rem"
                            height="3.2rem"
                            :src="item.userImg"
                        />
                    </van-col>
                    <van-col span="16">
                        <p class="name-sty">{{item.userName}}</p>
                        <p class="time-sty">{{item.addTime}}</p>
                    </van-col>
                    <van-col span="4" class="right-content">
                       <!-- <van-button plain icon="plus" type="primary" size="mini" color="#1365b7">关注</van-button> -->
                    </van-col>
                </van-row>
                <p class="content-text">{{item.content}}</p>
                <div :class="item.fileUrl.length > 1 ? 'imgs-list': ''" v-if="item.fileUrl" @click="openImg(item.fileUrl)">
                    <template v-for="url of item.fileUrl" :key="url">
                        <van-image
                            class="send-img"
                            width="100%"
                            fit="contain"
                            :src="url"
                        />
                    </template>
                </div>
                 <van-row>
                    <van-col span="18">
                    </van-col>
                    <van-col span="6" class="icon-sty">
                       <van-icon ref="like" :name="icon" :color="col"  size="18" @click="changeIcon($event)" />
                       <van-icon name="chat-o" :color="col" size="18" @click="openPing(item.id)" />
                       <van-icon name="share-o" :color="col" size="18" />
                    </van-col>
                </van-row>
                <van-divider :style="{ borderColor: '#', margin:'10px 0px' }" />
                <div style="line-height:18px">
                    <p v-for="text in item.pinglun" :key="text" class="name">{{text.sender}}：<span class="coment">{{text.content}}</span>  </p>
                    <!-- <p class="name">李狗：<span class="coment">如此自律，祝你早日喜提八块腹肌~</span></p> -->
                </div>
            </van-cell-group>
        </van-tab>
		<!-- <van-tab title="关注" dot>关注</van-tab> -->
    </van-tabs>
	<div class="release" @click="goRelease">
		<van-icon name="plus" color="#fff"/>
	</div>
    <van-popup
        v-model:show="show"
        closeable
        round
        close-icon="close"
        position="bottom"
        :style="{ height: '68%' }"
    >
        <van-cell-group inset>
            <van-field
                v-model="message"
                rows="6"
                autosize
                type="textarea"
                maxlength="100"
                placeholder="记录今天的锻炼日志~"
            />
            <van-field name="uploader">
                <template #input>
                    <van-uploader v-model="fileList" multiple />
                </template>
            </van-field>
		    </van-cell-group>
            <div class="btn">
                <van-button  round type="success" size="normal" color="#1365b7" @click="onClickRight" > 发表 </van-button>
            </div>
    </van-popup>
        <van-popup
        v-model:show="showPinglun"
        closeable
        round
        close-icon="close"
        position="bottom"
        :style="{ height: '48%' }"
    >
        <van-cell-group inset>
            <van-field
                v-model="pinglunMsg"
                rows="4"
                autosize
                type="textarea"
                maxlength="100"
                show-word-limit
                placeholder="发表您的看法~"
            />
		    </van-cell-group>
            <div class="btn">
                <van-button  round type="success" size="normal" color="#1365b7" @click="sendPinglun" > 发表 </van-button>
            </div>
    </van-popup>
</template>

<script>

	import { Toast, ImagePreview } from "vant"
    import { uploadImg, releaseGraphic, getGraphicData, sendComments } from '../../request/api/socialApi.js'
	import { getCurrentTime } from '../../utils/index.js'

    export default {
        name: 'home',
        data() {
            return {
				active: 0,
                icon: 'like-o',
                isTrue: true,
                col: '#666',
                show: false,
                showPinglun: false,
                id: '',
                message: '',
                pinglunMsg: '',
				fileList: [],
				imgUrlList: [],
                list: [
                    // {
                    //     id: "001",
                    //     userImg: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-d1e899516430480f57da34fd34891f18_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651936035&t=a129504ab1ae5e6437a4ce6247f1c86e",
                    //     userName: "王二狗",
                    //     content: "锻炼是拥有一个更健康强壮的身体的好方法。锻炼能让你放松并且心情愉悦。但是要记住,你应该采用不同的锻炼方式来保证你全身得到了所需的锻炼。",
                    //     sendTime: "2022-04-07 22:53:08",
                    //     like: 12,
                    //     pinglun: [],
                    // },
                    // {
                    //     id: "002",
                    //     userImg: "",
                    //     userName: "李二牛",
                    //     content: "坚持锻炼",
                    //     sendTime: "2022-04-07 22:52:08",
                    //     like: 12,
                    //     pinglun: [],
                    // }
                ],
            }
        },
        created() {
            this.getData()
        },
        methods: {
			// 去发布
			goRelease() {
                this.show = true
			},
            changeIcon(e) {
                if (e.target) {
                    console.log(e.target.className)
                    // e.target.className += ' active'
                    if (e.target.className === 'van-icon-like-o') {
                        e.target.className === 'van-icon-like'
                    }
                }
            },
            onClickRight() {
				if (this.message || this.fileList.length) {
					this.onSubmit()
				} else {
                    Toast({
                        message: '请输入内容',
                        icon: 'warning-o',
                    })
                }
			},
			// 提交,先上传图片拿到url,再提交
			onSubmit() {
				Toast.loading({
					duration: 0, // 持续展示 Toast
					message: '发布中...',
					forbidClick: true,
				})
				let files = this.fileList
				let formdata = new FormData()
				files.map(i => {
					formdata.append('file', i.file)
				})	
				uploadImg(formdata).then(res => {
					if (res.data) {
						this.imgUrlList = res.data.map(i => {
							return i.imgPath
						})
					}
					const obj = {
						id: this.$uid(),
						userImg: JSON.parse(sessionStorage.getItem('user')).img,
						userName: JSON.parse(sessionStorage.getItem('user')).name,
						content: this.message,
						fileUrl: this.imgUrlList,
						like: '18', // 点赞
						addTime: getCurrentTime()
					}
					releaseGraphic(obj).then(res => {
						if (res.data) {
						    if (res.data.code == 0) {
						        Toast({
									message: '发表成功',
									icon: 'success',
								})
                                this.getData()
                                this.show = false
						        this.$router.push({path:'/social'})
						    }
						} else {
						    Toast({
						    	message: '发表失败',
						    	icon: 'cross',
						    })
						}
					})
				}).catch()
			},
            // 获取列表数据
            async getData() {
                Toast.loading({
                    duration: 0, // 持续展示 toast
                    message: '加载中...',
                    forbidClick: true,
                })
               const { data } = await getGraphicData()
               if (data.code === 0) {
                   this.list = data.list
                   Toast.clear()
               } else {
                    Toast.clear()
                    Toast.fail(res.msg)
                }
            },
            // 点击预览图片
            openImg(imgArr) {
                ImagePreview(imgArr)
            },
            // 打开评论
            openPing(id) {
                this.showPinglun = true
                this.id = id
            },
            // 发表评论
            sendPinglun() {
                const obj = {
                    id: this.id,
                    sender: JSON.parse(sessionStorage.getItem('user')).name,
                    content: this.pinglunMsg
                }
                sendComments(obj).then(res => {
                    let { data } = res
                    if (data.code === 0) {
                        Toast({
                            message: '评论成功',
                            icon: 'success',
                        })
                        this.pinglunMsg = ''
                        this.showPinglun = false
                        this.getData()
                    }
                })
            }
		}
    }
</script>

<style lang="scss" scoped>
    .van-cell-group {
        padding: 16px;
        margin-bottom: 8px;
    }
	.van-tabs {
		::v-deep .van-tabs__content {
			padding-bottom: 34px;
		}
	}
	.release {
		width: 48px;
		height: 48px;
		text-align: center;
		background-color: #1365b7;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: 50%;
		position: fixed;
		right: 20px;
		bottom: 80px;
		.van-icon {
			font-size: 20px;
		}
		span {
			font-size: 12px;
			transform: scale(0.8);
		}
	}
    .cardTitle {
		text-align: center;
		margin: 16px auto 10px;
        font-size: 18px;
        font-weight: 600;
    }
    .name-sty{
        // margin-left: 8px;
        color: #000;
    }
    .time-sty {
        // margin-left: 8px;
        margin-top: 8px;
        font-size: 14px;
        color: #999;
    }
    .right-content{
        position: relative;
        .van-button{
            width: 56px;
            position: absolute;
            right: 0;
            border-radius: 4px;
        }
    }
    .icon-sty {
        display: flex;
        justify-content: space-between;
    }
    .content-text {
        margin: 6px 0;
        line-height: 20px;
        color: #333;
    }
    .imgs-list {
        display: flex;
        flex-wrap: wrap;
        ::v-deep .van-image {
            width: 33.3% !important;
            padding: 5px;
            box-sizing: border-box;
        }
    }
    .send-img{
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 8px;
    }
    .name {
        color: #333;
        font-size: 14px;
        font-weight: 600;
    }
    .coment {
        color: #333;
        font-size: 14px;
        font-weight: 500;
    }
    .del {
        color: #999;
        font-size: 12px;
        float: right;
    }
    .btn {
        width: 100%;
        text-align: center;
        .van-button{
            width: 80%;
        }
    }
    ::v-deep .active {
        color: red !important;
    }
</style>
